﻿<script setup lang="ts" name="EpArticle">
import { getArticleInfo } from '@/api/elementPlus'
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'

const { variables } = useDesign()

const appStore = useAppStoreWithOut()
const { systemConfig, affixTop } = storeToRefs(appStore)
const { t } = useI18n() // 国际化

const initData: any = reactive({
  data: []
})
const getInitData = () => {
  getArticleInfo(null, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      initData.data = []
      initData.data.push(...res.data)
      console.log(initData)
    }
  })
}
getInitData()

const activeTab = ref('detail')

const handleTabClick = (tab, event) => {
  console.log(tab, event)
}

const activeCollapse = ref('1')
type activitiesType = {
  content: string,
  timestamp: string,
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info',
  size?: 'normal' | 'large',
  icon?: string,
  color?: string,
  hollow?: boolean,
}
const activities: activitiesType[] = [
  {
    content: 'Custom icon',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
    icon: 'MoreFilled'
  },
  {
    content: 'Custom color',
    timestamp: '2018-04-03 20:46',
    color: '#0bbd87'
  },
  {
    content: 'Custom size',
    timestamp: '2018-04-03 20:46',
    size: 'large'
  },
  {
    content: 'Custom hollow',
    timestamp: '2018-04-03 20:46',
    type: 'primary',
    hollow: true
  },
  {
    content: 'Default node',
    timestamp: '2018-04-03 20:46'
  }
]
</script>
<template>
  <PageWrap scroll>
    <el-space :size="systemConfig.space" fill direction="vertical">
      <el-card shadow="never" class="no-border no-radius">
        <el-affix :offset="affixTop" :target="'.' + variables.namespace + '-scroll-wrap'"><el-page-header icon="ArrowLeft" content="详情页" /></el-affix>
        <el-alert title="详情页展示，本页面主要使用element-plus的页头组件、标签页组件、走马灯、折叠面板、描述列表、时间线组件。" type="success" :closable="false" show-icon />
        <el-carousel :interval="4000" type="card">
          <el-carousel-item v-for="item in initData.data" :key="item">
            <el-image :src="'https://cdn.jsdelivr.net/gh/kaivin/images/list/' + item.type + '/' + item.img + '.jpg'" fit="cover" lazy>
              <template #placeholder>
                <div class="image-slot">
                  <div class="slot-content">
                    <svg-icon icon="ep:picture" />
                    <p>{{ t('common', 'loadingText') }}</p>
                  </div>
                </div>
              </template>
              <template #error>
                <div class="image-slot">
                  <div class="slot-content">
                    <svg-icon icon="ii:icon-image-failed" />
                    <p>{{ t('common', 'loadingFailed') }}</p>
                  </div>
                </div>
              </template>
            </el-image>
          </el-carousel-item>
        </el-carousel>
        <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleTabClick">
          <el-tab-pane label="详情" name="detail">
            <h3>详情数据信息展示标签页</h3>
            <el-collapse v-model="activeCollapse" accordion>
              <el-collapse-item name="1">
                <template #title>
                  <svg-icon icon="ep:operation" />
                  <strong>推销途径</strong>
                </template>
                <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
                <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
              </el-collapse-item>
              <el-collapse-item name="2">
                <template #title>
                  <svg-icon icon="ep:user" />
                  <strong>客户反馈</strong>
                </template>
                <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
                <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
              </el-collapse-item>
              <el-collapse-item name="3">
                <template #title>
                  <svg-icon icon="ep:star" />
                  <strong>有效评论</strong>
                </template>
                <div>Simplify the process: keep operating process simple and intuitive;</div>
                <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
                <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
              </el-collapse-item>
              <el-collapse-item name="4">
                <template #title>
                  <svg-icon icon="ep:tools" />
                  <strong>技术理论</strong>
                </template>
                <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
                <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
              </el-collapse-item>
            </el-collapse>
            <p>在手风琴组件结尾加一段结束性文案</p>
          </el-tab-pane>
          <el-tab-pane label="参数" name="params">
            <el-descriptions title="产品参数" :column="3" border>
              <template #extra>
                <el-button type="primary">编辑</el-button>
              </template>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <svg-icon icon="ep:user" />
                    产品名
                  </div>
                </template>
                kooriookami
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <svg-icon icon="ep:rank" />
                    产品编码
                  </div>
                </template>
                18100000000
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <svg-icon icon="ep:clock" />
                    生产日期
                  </div>
                </template>
                2000-08-08 16:34:32
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <svg-icon icon="ep:picture" />
                    标签
                  </div>
                </template>
                <el-tag>酒精</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <svg-icon icon="ep:more-filled" />
                    产地
                  </div>
                </template>
                No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="货源追踪" name="track">
            <div style="padding: 20px 20px 0">
              <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="(activity.type)" :color="activity.color" :size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp" placement="top">
                  <el-card>{{ activity.content }}</el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-alert {
  margin: var(--el-space) 0;
}

.el-card {
  :deep(.el-image) {
    display: block;
    width: 100%;
    height: 100%;
  }

  .el-collapse {
    :deep(.el-icon) {
      margin-right: 5px;
      font-size: var(--el-font-size-base);
      color: var(--el-text-color-regular);
    }
  }
}

.cell-item {
  display: flex;
  align-items: center;

  .el-icon {
    margin-right: 5px;
  }
}
</style>
